<template>
  <div class="drag-container" @mousemove="moving" @mouseup="mouseUp">
    <div class="drag-el" @mousedown="startMove" :style="{left:posX + 'px',top:posY + 'px'}">
      <div>{{posX}}</div>
      <div>{{posY}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Drag2',
  data(){
    return {
      move_started:0,
      posX:0,
      posY:0,
      orgX:0,
      orgY:0,
    }
  },
  methods:{
    rf:()=>{},
    startMove(e){
      e=e||window.event;
      this.move_started=1;
      this.orgX=e.clientX - this.posX;
      this.orgY=e.clientY - this.posY;
      document.onmouseup= e=>{
        this.move_started=0;
        document.onmouseup = null;
      }
      // console.log(this.move_started,this.orgX,this.orgY,e.clientX,e.clientY,[e.layerX,e.layerY])
    },
    moving(e){
      e=e||window.event;
      // console.log(1,e.clientX,this.orgX,this.posX,this.posY)
      if(this.move_started){
        this.posX=e.clientX - this.orgX;
        this.posY=e.clientY - this.orgY;
      }
    },
    endMove(e){
      // console.log(e.target.className,!~e.target.className.indexOf('drag-el'))
      if(e.target.className&&!~e.target.className.indexOf('drag-el')){
        this.move_started=0;
        // this.orgX=0;
        // this.orgY=0;
      }
      console.log(this.move_started)
    },
    mouseUp(){
      this.move_started=0;
      // this.orgX=0;
      // this.orgY=0;
    },
    moveOut(){
      this.move_started=0;
    }
  },
}
</script>
<style scoped lang="stylus">
.drag-container{
  position:relative;
  width:100%;
  height:100%;
  user-select: none;
  .drag-el{
    position:absolute;
    width:.5rem;
    height:.5rem;
    background-color:#f66;
  }
}
</style>

